import { IState, IUserAnswer } from '@/typings';
import React, { FC } from 'react';
import { useSelector } from 'react-redux';

import Header from '../components/Header';
import ResultPanel from '../components/ResultPanel';

const Result: FC = () => {
  const userAnswers: IUserAnswer[] = useSelector(
    (state: IState) => state.userAnswers
  );

  console.log(userAnswers);

  let flagId: number = 0;

  return (
    <div className="container">
      <Header headerTitle="考试结果" iconShow={true} />
      <div className="result-panel">
        {userAnswers.map((item: IUserAnswer) => {
          flagId++;
          // index 不是不能用于key 是因为数组改变导致index会变化
          //如果不用key 最好是用qid 但聚合API题目ID存在相同的情况 不适用
          return <ResultPanel userAnswerItem={item} key={flagId} />;
        })}
      </div>
    </div>
  );
};

export default Result;
